<template>
	<view class="container">
			<view class="btn btn-v1" @click="loginTipHandle" v-if="!privacyFlag.length">
				<button type="primary" color="red">登录</button>
			</view>
			<view class="btn btn-v1" v-else>
				<button type="primary" open-type="getPhoneNumber" @getphonenumber="cbphone" color="red" :disabled="!privacyFlag.length">登录</button>
			</view>
			
			<view class="privacy-info">
				<u-checkbox-group v-model="privacyFlag">
					<u-checkbox shape="circle" activeColor="#6A83FF" label="" name="privacy"></u-checkbox>
				</u-checkbox-group>
				<text class="p-text">
					使用手机一键登录即代表同意
					<text class="text-href" @click="handlePrivacy('pagree')">《隐私政策》</text>
					并使用手机登录
				</text>
			</view>
		<privacy-modal></privacy-modal>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { wxLogin } from '@/api/user.js';
import { setStorageSync, toast, useRouter } from '@/utils/utils.js';
import useUserStore from '@/store/user.js';
import ENV_CONFIG from '@/env.js';


const privacyFlag = ref([])
// 隐私跳转
function handlePrivacy(page) {
	useRouter(`/pages/privacy/${page}`, null, 'navigateTo');
}
// 隐私未勾选提示
const loginTipHandle = async () => {
	if (privacyFlag.value.length === 0) {
		uni.showToast({
			title: `请先阅读和同意用户协议和隐私`,
			icon: 'none'
		});
	}
};

// 电话code获取
function cbphone(e) {
	if (!e.target.code) return;
	login(e.target.code);
}

// wx登录接口
async function login(phoneCode) {
	try {
		uni.showLoading({
			title: '加载中...',
			mask: true
		});
		const { data, status } = await wxLogin(phoneCode);
		const { loginStatus, phone, token, companyCode } = data;

		if (status === 200) {
			uni.hideLoading();
			if (loginStatus == '0') {
				toast('您无登录权限', 'none', 2000);
			}
			if (token) {
				await toast('登录成功', 'none', 1000);
				setStorageSync('token', token);
				useRouter(`/pages/index/index`, null, 'redirectTo');
			}
		} else {
			throw new Error(res.msg || '登录失败');
		}
	} catch (e) {
		uni.hideLoading();
		toast('登录失败');
	}
}
</script>

<style lang="scss" scoped>
.container {
	position: relative;
	width: 750rpx;
	height: 100vh;
	background: linear-gradient(180deg, rgba(210, 136, 255, 1), rgba(255, 255, 255, 1));
	.nav-title {
		position: relative;
		top: 15rpx;
		left: 275rpx;
		color: rgba(41, 45, 50, 1);
		font-size: 34rpx;
		text {
			font-weight: 700;
		}
	}
	.header {
		position: relative;
		top: 153rpx;
		left: 268rpx;
		image {
			width: 196rpx;
			height: 196rpx;
		}

		.info {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 226rpx;
			left: -30rpx;
			text-align: center;
			font-family: 'MiSans';
			color: #3b3b3b;
			.title {
				font-size: 44rpx;
			}
			.create {
				font-size: 24rpx;
			}
		}
		// .title {
		// 	position: absolute;
		// 	font-family: 'MiSans';
		// 	font-size: 44rpx;
		// 	color: #3b3b3b;
		// 	position: absolute;
		// 	top: 244rpx;
		// 	left: -22.5rpx;
		// }
		// .create {
		// 	position: absolute;
		// 	font-family: 'MiSans';
		// 	font-size: 24rpx;
		// 	color: #3b3b3b;
		// 	position: absolute;
		// 	top: 314rpx;
		// 	left: 15.5rpx;
		// }
	}
	.top-img {
		position: absolute;
		top: 0;
		width: 750rpx;
		height: 827rpx;
	}
	.top-icon {
		position: absolute;
		top: 537rpx;
		left: 302rpx;
		width: 146rpx;
		height: 168rpx;
	}
	.phone {
		position: absolute;
		left: 220rpx;
		top: 773rpx;
		font-size: 50rpx;
		color: #1a1a1a;
		font-weight: 600;
	}
	.tip {
		position: absolute;
		color: #999;
		font-size: 23rpx;
		left: 245rpx;
		top: 871.32rpx;
	}
	.btn {
		position: absolute;
		// left: 103rpx;
		width: 463rpx;
		height: 86rpx;
		line-height: 88rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		border-radius: 50rpx;
		letter-spacing: 4rpx;
		overflow: hidden;
	}
	.btn-v1 {
		left: 148rpx;
		top: 949rpx;
		background: linear-gradient(325.31deg, #23c46d -13.34%, #36ec7f 115.44%);
	}
	.btn-v2 {
		left: 148rpx;
		top: 949rpx;
		background: linear-gradient(325.31deg, #7875ff -13.34%, #5297ff 115.44%);
	}
	.privacy-info {
		position: absolute;
		bottom: 118rpx;
		left: 38rpx;
		.p-text {
			position: absolute;
			width: 621rpx;
			left: 50rpx;
			top: 10rpx;
			font-size: 23rpx;
			color: #999;
		}
		.text-href {
			color: #0303ff;
		}
	}
	:deep() {
		button {
			background: linear-gradient(90deg, rgba(246, 122, 255, 1), rgba(0, 255, 255, 1));
			font-size: 28rpx;
			line-height: 91rpx;
		}
	}
}
</style>
